
var baseUrl = "http://58.33.201.244"
var webSocketUrl = "ws://58.33.201.244"
$(function () {
  

    $('.center_btnbao').on('click', function () {
        $('.filterbg2').show();
        $('.popup2').show();
        $('.popup2').width('3px');
        $('.popup2').animate({ height: '76%' }, 400, function () {
            $('.popup2').animate({ width: '82%' }, 400);
        });
        setTimeout(summaryShow2, 800);
    });
    $('.popupClose2').on('click', function () {
        $('.popupClose2').css('display', 'none');


        $('.popup2').animate({ width: '3px' }, 400, function () {
            $('.popup2').animate({ height: 0 }, 400);
        });
        setTimeout(summaryHide2, 800);
    });
    function summaryShow2() {
        $('.popupClose2').css('display', 'block');
        // init()
        // getAlarmData()
        createGridLayout2(toggle4_2);
        formatVideolist()

    };
    function summaryHide2() {
        $('.filterbg2').hide();
        $('.popup2').hide();
        $('.popup2').width(0);
    };

    // 定义不同的布局数组
    var toggle1_2 = [1]; //单屏
    var toggle4_2 = [1, 2, 3, 4]; //4分屏
    var toggle6_2 = [1, 2, 3, 4, 5, 6]; //6分屏
    var toggle9_2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //9分屏
    // 根据不同的按钮点击事件，应用不同的布局
    document.getElementById("toggle1_2").addEventListener("click", function () {
        createGridLayout2(toggle1_2);

    });
    document.getElementById("toggle4_2").addEventListener("click", function () {
        createGridLayout2(toggle4_2);

    });
    document.getElementById("toggle6_2").addEventListener("click", function () {
        createGridLayout2(toggle6_2);

    });
    document.getElementById("toggle9_2").addEventListener("click", function () {
        createGridLayout2(toggle9_2);

    });

    // 动态创建视频容器
    function createGridLayout2(layout) {
        var container = document.getElementById("container2");
        // 清空容器
        container.innerHTML = "";
        // 动态创建class
        container.className = "play" + layout.length;
        // 根据布局创建视频元素并添加到容器中
        for (var i = 0; i < layout.length; i++) {
            var video = createVideoElement2(i);
            var number = layout.length;
            count2 = number
            switch (number) {
                case 1:
                    video.className = "grid-item1";
                    break;
                case 4:
                    video.className = "grid-item4";
                    break;
                case 6:
                    video.className = "grid-item6";
                    break;
                case 9:
                    video.className = "grid-item9";
                    break;
                default:
                    video.className = "grid-item4";
                    break;
            }
            container.appendChild(video);
        }
    }
    // 动态创建video标签
    function createVideoElement2(id) {
        var video = document.createElement("live-player");
        video.id = "videobao" + id;
        video.videoUrl = ""
        video.loop = true
        return video;
    }

})

var DeviceDatalist = [];

function formatVideolist() {

    // if (alarminfo.index && document.getElementById("baoji" + alarminfo.index)) {
    //     document.getElementById("baoji" + alarminfo.index).src = "./camera.png"
    // }

    // indexArray = []

}


function getAlarmData() {


    for (let i = 0; i < mainData.DeviceData.length; i++) {
        $.ajax(baseUrl+":8091/dev-device-instance/getListDeviceAlarm", {
            method: 'GET',
            params: {
                deviceId: mainData.DeviceData[i].ID
            },
            headers: {
                "content-type": "application/json",
            },
            success: function (result) {
                if (result.code == 200) {
                    DeviceDatalist = []
                    for (let j = 0; j < result.data.list.records.length; j++) {
                        DeviceDatalist.push({ name: mainData.DeviceData[i].Name, alarmName: result.data.list.records[j].alarmName, time: result.data.list.records[j].alarmTime, alarmId: result.data.list.records[j].alarmId })
                    }

                }
            },
            error: function (err) {
                console.log(err);
            }
        })

    }
    setTimeout(function () {
        DeviceDatalistfun()
    }, 300)


}

function DeviceDatalistfun() {
    var html = "";
    for (let i = 0; i < DeviceDatalist.length; i++) {
     
        html += "<div style='max-width: 600px;height: 40px;display: flex;line-height:50px;' onclick='clickbaojss(" + (JSON.stringify(DeviceDatalist[i])) + ")'>";
        html += '<img src="./alarm.png" alt="" srcset="" style="width:40px;height: 40px;" id="baoji' + i + '">';
        // html += '<div style="color: aqua;margin-left:20px;">' + DeviceDatalist[i].name + '</div>';
        html += '<div style="color: #050a20;display: block;margin-left:20px;">' + formatTime(DeviceDatalist[i].time) + '</div>';
        html += '<div style="color: #050a20;margin-left: 60px;">' + DeviceDatalist[i].alarmName + '</div>';
        // html += '<img src="./alarm.png" alt="" srcset="" style="width:40px;height: 40px;float:right;right: 10px;">';


        html += '</div>';
        html += '<div style="border-bottom: 1px dotted aqua;background-color:aqua;width: 100%;margin-top:10px;margin-bottom:20px"></div>'
    }
    document.getElementById("meagrsbaoj").innerHTML = (html);
}

function formatTime(time) {
    // var mydate = new Date(time);
    const now = new Date(time);

    const year = now.getFullYear();
    const month = ('0' + (now.getMonth() + 1)).slice(-2);
    const day = ('0' + now.getDate()).slice(-2);
    const hours = ('0' + now.getHours()).slice(-2);
    const minutes = ('0' + now.getMinutes()).slice(-2);
    const seconds = ('0' + now.getSeconds()).slice(-2);

    const formattedTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    return formattedTime;

}

var indexArray = []
var count2s = 0

var alarminfo = 0

function clickbaojss(val) {
    alarminfo = val
    // for (let i = 0; i < indexArray.length; i++) {
    //     if (val.index == i) {
    //         document.getElementById("baoji" + val.index).src = "./gif/loading.gif"
    //     } else {
    //         document.getElementById("baoji" + i).src = "./camera.png"
    //     }
    // }
    $.ajax(baseUrl + ":8091/dev-device-instance/getPropertyVideoList", {
        method: 'GET',
        params: {
            alarmId: val.alarmId,
            size: 6,
        },
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            if (result.code == 200) {
                var list = result.data.list.records
                for (let i = 0; i < list.length; i++) {
                    document.getElementById("player"+i).videoUrl = list[i].url
                }
                // document.getElementById("baoji" + val.index).src = "./bfzz.png"
            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}

var ws;

function init() {

    ws = new WebSocket(webSocketUrl + ":8091/webSocket/1733739398828335104");

    ws.onopen = function () {
        console.log("onopen");
    };

    ws.onmessage = function (e) {
        // e.data contains received string.
        console.log("onmessage: " + e.data);
        if (e.data == 'update') {
            // if (alarminfo.index) {
            $.ajax(baseUrl + ":8091/dev-device-instance/getPropertyVideoList", {
                method: 'GET',
                params: {
                    alarmId: "",
                    size: 6,
                },
                headers: {
                    "content-type": "application/json",
                },
                success: function (result) {
                    if (result.code == 200) {
                        var list = result.data.list.records
                        for (let i = 0; i < list.length; i++) {
                            document.getElementById("player"+i).videoUrl = "http://192.168.8.17:80/nvc/SHCQ000089/flv/hls/stream_3.flv"
                        }
                        // document.getElementById("baoji" + val.index).src = "./bfzz.png"
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
            getAlarmData()
            // }

        }
    };

    ws.onclose = function () {
        console.log("onclose");
    };
    ws.onerror = function (e) {
        // output("onerror");
        console.log(e)
    };
}